@extends('admin::layouts.master')

@section('title', __('MultiSeller::common.seller_configs'))

@php
  $sellerGroups = \Beike\Seller\Repositories\SellerGroupRepo::list();
  $sellerGroups = $sellerGroups->map(function ($item) {
    $item['label'] = $item->description->name ?? '';
    return $item;
  })->toArray();
@endphp

@section('page-bottom-btns')
  <button type="button" class="w-min-100 btn btn-primary submit-form btn-lg" form="multi-seller-form">{{ __('common.save') }}</button>
  <button class="btn btn-lg btn-default w-min-100 ms-3" onclick="bk.back()">{{ __('common.return') }}</button>
@endsection

@section('content')
  @if ($errors->has('error'))
    <x-seller-alert type="danger" msg="{{ $errors->first('error') }}" class="mt-4" />
  @endif

  @if (session()->has('success'))
    <x-seller-alert type="success" msg="{{ session('success') }}" class="mt-4" />
  @endif
<div id="multiseller" class="card h-min-600">
  <div class="card-body">
    <div class="mb-5">
      <form class="needs-validation" novalidate action="{{ admin_route('seller_settings.save') }}" method="POST" id="multi-seller-form">
        @csrf
        <ul class="nav nav-tabs nav-bordered mb-3" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-basic" type="button" >{{ __('admin/product.basic_information') }}</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-service" type="button">{{ __('seller::edit.text_service') }}</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-seller-group-commission" type="button">{{ __('MultiSeller::setting.seller_group_commission') }}</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-seller-product-approve" type="button">{{ __('MultiSeller::setting.seller_product_approve') }}</button>
          </li>
        </ul>
        <div class="tab-content mt-4">
          <div class="tab-pane fade show active" id="tab-basic">
            <x-admin-form-select :title="__('MultiSeller::common.approve_seller')" name="approve_seller"
              :value="old('approve_seller', $plugin->getSetting('approve_seller') ?? 0)" key="key" label="label"
              :options="[['label'=> __('common.yes'), 'key'=> 1], ['label'=> __('common.no'), 'key'=> 0]]"
            />

            <x-admin-form-select :title="__('MultiSeller::common.seller_oss')" name="seller_oss"
              :value="old('seller_oss', $plugin->getSetting('seller_oss') ?? 0)" key="key" label="label"
              :options="[['label'=> __('common.yes'), 'key'=> 1], ['label'=> __('common.no'), 'key'=> 0]]"
            >
              <div class="help-text font-size-12 lh-base">{{ __('MultiSeller::common.seller_oss_description') }}</div>
            </x-admin-form-select>

            <x-admin-form-select :title="__('MultiSeller::common.default_seller_group')" name="default_seller_group_id"
              :value="old('default_seller_group_id', $plugin->getSetting('default_seller_group_id') ?? '')" key="id" label="label"
              :options="$sellerGroups"
            />

            <x-admin::form.row :title="__('MultiSeller::setting.account_page_id')">
              <div class="wp-400">
                <el-autocomplete
                  class="w-100"
                  v-model="accountPage.keyword"
                  value-key="name"
                  size="small"
                  :fetch-suggestions="accountPageQuerySearch"
                  placeholder="{{ __('admin/builder.modules_keywords_search') }}"
                  @select="accountPageHandleSelect"
                ></el-autocomplete>
                <input name="account_page_id" class="d-none" :value="accountPage.id" />
              </div>
            </x-admin::form.row>

            <x-admin::form.row title="{{ __('MultiSeller::common.withdraw_banks') }}">
              <table class="table table-bordered w-max-400" id="withdraw-banks-app">
                <thead>
                  <th>{{ __('MultiSeller::common.withdraw_banks') }}</th>
                  <th width="50"></th>
                </thead>
                <tbody>
                  <tr v-for="item, index in withdraw_banks" :key="index">
                    <td>
                      <input required placeholder="{{ __('MultiSeller::common.withdraw_bank_name') }}" type="text"
                        :name="'withdraw_banks['+ index +']'" v-model="withdraw_banks[index]" class="form-control">
                    </td>
                    <td><i @click="withdraw_banks.splice(index, 1)" class="bi bi-x-circle fs-4 text-danger cursor-pointer"></i>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="1"><input v-if="!withdraw_banks.length" name="withdraw_banks" class="d-none"></td>
                    <td><i class="bi bi-plus-circle cursor-pointer fs-4" @click="withdraw_banks.push('')"></i></td>
                  </tr>
                </tbody>
              </table>
            </x-admin::form.row>
          </div>
          <div class="tab-pane fade show" id="tab-service">
            <x-seller-form-image name="customer_service_qrcode" :title="__('seller::edit.customer_service_qrcode')" :value="old('customer_service_qrcode', $plugin->getSetting('customer_service_qrcode') ?? '')">
              <div class="d-flex align-items-center lh-1">
                <div class="delete-img text-danger cursor-pointer">{{ __('common.delete') }}</div>
                <span class="mx-1 opacity-25">|</span>
                <div class="help-text font-size-12 lh-base mt-0">{{ __('common.recommend_size') }} 400*400</div>
              </div>
            </x-seller-form-image>
            <x-seller-form-image name="customer_service_icon" :title="__('seller::edit.customer_service_icon')" :value="old('customer_service_icon', $plugin->getSetting('customer_service_icon') ?? '')">
              <div class="d-flex align-items-center lh-1">
                <div class="delete-img text-danger cursor-pointer">{{ __('common.delete') }}</div>
                <span class="mx-1 opacity-25">|</span>
                <div class="help-text font-size-12 lh-base mt-0">{{ __('common.recommend_size') }} 70*70</div>
              </div>
            </x-seller-form-image>

            <x-seller-form-input name="customer_service_link"  :title="__('seller::edit.customer_service_link')" :value="old('customer_service_link', $plugin->getSetting('customer_service_link') ?? '')" />
          </div>
          <div class="tab-pane fade show" id="tab-seller-group-commission">
            {{-- // 需要表格显示商户组的佣金信息，并可编辑佣金 --}}
            <x-admin::form.row title="编辑佣金">
              <table class="table table-bordered w-max-500">
                <thead>
                  <th>{{ __('MultiSeller::setting.id') }}</th>
                  <th>{{ __('MultiSeller::seller_group.name') }}</th>
                  <th>{{ __('MultiSeller::seller_group.fee_sale_flat') }}</th>
                  <th>{{ __('MultiSeller::seller_group.fee_sale_percent') }}</th>
                </thead>
                <tbody>
                  <tr v-for="item, index in sellerGroups" :key="index">
                    <td>@{{ item.id }}</td>
                    <td>@{{ item.label }}</td>
                    <td>
                      @{{ item.fee_sale_flat }} <a href="javascript:void(0)" @click="updateFeeSale(item.id, 'fee_sale_flat', item.fee_sale_flat, index)"><i class="bi bi-pencil-square"></i></a>
                    </td>
                    <td>
                      @{{ item.fee_sale_percent }} <a href="javascript:void(0)" @click="updateFeeSale(item.id, 'fee_sale_percent', item.fee_sale_percent, index)"><i class="bi bi-pencil-square"></i></a>
                    </td>
                  </tr>
                </tbody>
              </table>
              <a href="{{ admin_route('seller_groups.index') }}" class="btn btn-outline-info btn-sm">{{ __('MultiSeller::seller_group.manage_seller_group') }}</a>
            </x-admin::form.row>
          </div>
          <div class="tab-pane fade show" id="tab-seller-product-approve">
            <x-admin-form-select :title="__('MultiSeller::setting.product_approve_default')" name="product_approve_default"
                                :value="old('product_approve_default', $plugin->getSetting('product_approve_default') ?? '')" key="key" label="label"
                                :options="[['label'=> __('common.yes'), 'key'=> 1], ['label'=> __('common.no'), 'key'=> 0]]"
            />

          <x-admin::form.row title="{{ __('MultiSeller::setting.product_approve_except') }}">
            <div class="module-edit-group wp-600">
              <div class="autocomplete-group-wrapper">
                <el-autocomplete
                  class="inline-input"
                  v-model="exceptSeller.keyword"
                  value-key="store_name"
                  size="small"
                  :fetch-suggestions="exceptSellerQuerySearch"
                  placeholder="{{ __('admin/builder.modules_keywords_search') }}"
                  @select="exceptSellerHandleSelect"
                ></el-autocomplete>

                <div class="item-group-wrapper" v-loading="exceptSeller.loading">
                  <template v-if="exceptSeller.products.length">
                    <div v-for="(item, index) in exceptSeller.products" :key="index" class="item">
                      <div>
                        <i class="el-icon-s-unfold"></i>
                        <span>@{{ item.store_name }}</span>
                      </div>
                      <i class="el-icon-delete right" @click="exceptSellerRemoveProduct(index)"></i>
                      <input type="text" :name="'product_approve_except['+ index +']'" :value="item.id" class="form-control d-none">
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </x-admin::form.row>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('footer')
<script>
  let banksApp = new Vue({
    el: '#multiseller',
    data: {
      withdraw_banks: @json(old('withdraw_banks', $plugin->getSetting('withdraw_banks') ?: [])),
      sellerGroups: @json($sellerGroups),
      exceptSeller: {
        keyword: '',
        products: @json(old('product_approve_except', $product_approve_except ?: [])),
        loading: null,
      },
      accountPage: {
        keyword: @json($account_page_name ?? ''),
        id: @json(old('account_page_id', $plugin->getSetting('account_page_id') ?? '')),
        loading: null,
      }
    },
    methods: {
      exceptSellerQuerySearch(keyword, cb) {
        $http.get('sellers/autocomplete?name=' + encodeURIComponent(keyword), null, {hload:true}).then((res) => {
          cb(res.data);
        })
      },

      accountPageQuerySearch(keyword, cb) {
        $http.get('pages/autocomplete?name=' + encodeURIComponent(keyword), null, {hload:true}).then((res) => {
          cb(res.data);
        })
      },

      accountPageHandleSelect(item) {
        this.accountPage.keyword = item.name;
        this.accountPage.id = item.id;
      },

      exceptSellerHandleSelect(item) {
        if (!this.exceptSeller.products.find(v => v.id * 1 == item.id * 1)) {
          this.exceptSeller.products.push(item);
        } else {
          layer.msg('{{ __('validation.unique', ['attribute' => '']) }}', ()=>{})
        }
        this.exceptSeller.keyword = ""
      },

      exceptSellerRemoveProduct(index) {
        this.exceptSeller.products.splice(index, 1);
      },

      updateFeeSale(id, key, value, index) {
        const _this = this;
        const title = key == 'fee_sale_flat' ? '{{ __('MultiSeller::seller_group.fee_sale_flat') }}' : '{{ __('MultiSeller::seller_group.fee_sale_percent') }}';
        this.$prompt('', title, {
          confirmButtonText: '{{ __('common.confirm') }}',
          cancelButtonText: '{{ __('common.cancel') }}',
          inputValue: value,
          closeOnClickModal: false,
        }).then(({ value }) => {
          $http.put('seller_groups/' + id + '/update_fee_sale', {[key]: value}).then((res) => {
            _this.sellerGroups[index][key] = value;
          })
        })
      }
    },
  });

  $('.delete-img').click(function () {
    $(this).parent().siblings('input[type="hidden"]').val('');
    $(this).parent().siblings('.open-file-manager').html('<i class="bi bi-plus fs-1 text-muted"></i>');
  });
</script>
<style>
  .card-body > h6.border-bottom.pb-3.mb-4 {
    display: none;
  }
</style>
@endpush
